<template>
	<view class="body">
		<form @submit="formSubmit">
			<view class="face-wapper">
				<image src="../../static/icos/default-face.png" class="face"></image>
			</view>
			
			<view class="info-wapper">
				<label class="words-lbl">账号</label>
				<input name="username" type="text" value="" class="input" placeholder="请输入用户名" placeholder-class="graywords"/>
			</view>
			
			<view class="info-wapper" style="margin-top: 40upx;">
				<label class="words-lbl">密码</label>
				<input name="password" type="text" value="" password="true" class="input" placeholder="请输入密码" placeholder-class="graywords"/>
			</view>
			
			<button type="primary" form-type="submit" style="margin-top: 60upx;width: 90%;">注册/登录</button>
		</form>
		
		<!-- 第三方登录H5不支持，所以隐藏掉 -->
		<!-- #ifndef H5 -->
			<view class="third-wapper">
				
				<view class="third-line">
					<view class="single-line">
						<view class="line"></view>
					</view>
					
					<view class="third-words">第三方账号登录</view>
					
					<view class="single-line">
						<view class="line"></view>
					</view>
				</view>
				
				<view class="third-icos-wapper">
					<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
					<!-- #ifdef APP-PLUS -->
						<image src="../../static/icos/weixin.png" data-logintype="weixin" @click="appOAuthLogin" class="third-ico"></image>
						<image src="../../static/icos/QQ.png" data-logintype="qq" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
						<image src="../../static/icos/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
						<button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
						</button>
					<!-- #endif -->
				</view>
			</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			//密码登录注册
			formSubmit(e){
				let username = e.detail.value.username;//用户名
				let password = e.detail.value.password;//密码
				
				if(username == '' || password ==''){
					uni.showToast({title: '账号，密码不能为空',duration: 2000,icon:'none'});
				}
				else
				{
					uni.request({
					    url: this.serverUrl+'/user/registOrLogin'+this.user_authority, //仅为示例，并非真实接口地址。
					    data:{
							"username":username,
							"password":password
						},
						method:"POST",
					    success: (res) => {
							//判断请求状态
							if(res.data.status == 200){
								let userInfo = res.data.data;
								//保存用户信息到全局的缓存中
								uni.setStorageSync("globalUser",userInfo);
								uni.showToast({title: '提交成功',duration: 2000,icon:'none'});
								//切换页面跳转，使用tab切换的api
								setTimeout(()=>{
									uni.switchTab({url:"../me/me"});
								},2000)
							}
							else if(res.data.status == 500){
								uni.showToast({title: res.data.msg,duration: 2000,icon:'none'});
							}
							else{
								uni.showToast({title: '提交失败',duration: 2000,icon:'none'});
							}
					    }
					});
				}
			},
			//小程序微信登录
			wxLogin(e){
				//通过微信开发能力，获得微信用户信息
				let userInfo = e.detail.userInfo;
				//实现微信登录
				uni.login({
					provider:"weixin",
					success: (loginRuest) => {
						//获得微信登录的 code：授权码
						let code = loginRuest.code;
						let loginTowhichMP = 1;//这里是因为后台参数的需求，
			
						uni.request({
						    url: this.serverUrl+'/stu/mpWXLogin/'+ code, 
							data:{
								"avatarUrl":userInfo.avatarUrl,
								"nickName":userInfo.nickName,
								"whichMP":loginTowhichMP
							},
							method:"POST",
						    success: (userResult) => {							 
								if(userResult.data.status == 200){
									let userInfo = userResult.data.data;
									//保存用户信息到全局的缓存中
									uni.setStorageSync("globalUser",userInfo);
									uni.showToast({title: '提交成功',duration: 2000,icon:'none'});
									//切换页面跳转，使用tab切换的api
									setTimeout(()=>{
										uni.switchTab({url:"../me/me"});
									},2000)
								}else{
									uni.showToast({title: '暂不支持微信登录',duration: 2000,icon:'none'});
								}
						    }
						});
					}
				})
			},
			//app端，微信，QQ，微博登录
			appOAuthLogin(e){
				var me = this;
				// 获取用户的登录类型
				var logintype = e.currentTarget.dataset.logintype;
				
				// 授权登录
				uni.login({
					provider: logintype,
					success(loginRes) {
						
						// 授权登录成功以后，获取用户的信息
						uni.getUserInfo({
							provider: logintype,
							success(info) {
								var userInfo = info.userInfo;
								var face = "";
								var nickname = "";
								var openIdOrUid = "";
								if (logintype == "weixin") {
									face = userInfo.avatarUrl;
									nickname = userInfo.nickName;
									openIdOrUid = userInfo.openId;
								} else if (logintype == "qq") {
									openIdOrUid = userInfo.openId;
									nickname = userInfo.nickname;
									face = userInfo.figureurl_qq_2;
								} else if (logintype == "sinaweibo") {
									openIdOrUid = userInfo.id;
									nickname = userInfo.nickname;
									face = userInfo.avatar_large;
								}
								
								// 调用开发者后台，执行一键注册或登录
								uni.request({
									url: me.serverUrl + "/appUnionLogin/" + logintype + this.user_authority,
									data: {
										"openIdOrUid": openIdOrUid,
										"nickname": nickname,
										"face": face
									},
									method: "POST",
									success(result) {
										if (result.data.status == 200) {
											var userInfo = result.data.data;
											
											//保存用户信息到全局的缓存中
											uni.setStorageSync("globalUser",userInfo);
											uni.showToast({title: '登录成功',duration: 2000,icon:'none'});
											//切换页面跳转，使用tab切换的api
											setTimeout(()=>{
												uni.switchTab({url:"../me/me"});
											},2000)
										}
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	@import url("regisLogin.css");
</style>
